<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style>
		.layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
			top: 50%;
			transform: translateY(-50%);
		}
	</style>
</head>
<body>
	<div class="demoTable">
		<button class="layui-btn" data-type="cancelAll">批量取消</button>
	</div>

	<table id="tableId" lay-filter="tableFilter"></table>

	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit" data-type="edit" >出库</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="cancel">取消</a>
	</script>
	<script type="text/html" id="statusTpl">
		{{#     if(d.status == 1) {             }}
		物料未出库
		{{#     } else if(d.status == 2) {      }}
		物料已出库
		{{#     }else if (d.status == 3) {      }}
		产品已取消
		{{#     }                               }}
	</script>
	<script>
		layui.use(['table'], function() {
			var table = layui.table;

			table.render({
			    elem: '#tableId'
			    ,url: '/output/selectByPage' //数据接口
			    ,page: true //开启分页
			    ,id : "layUITableId" //设定容器唯一ID，id值是对表格的数据操作方法上是必要的传递条件，它是表格容器的索引
			    ,cols: [[ //表头
			      {type: 'checkbox', fixed: 'left'}
			      ,{field: 'id', title: 'ID'}
			      ,{field: 'materialName', title: '物料名称'}
			      ,{field: 'count', title: '数量'}
			      ,{field: 'shelflife', title: '保质期'}
			      ,{field: 'status', title: '状态',templet: '#statusTpl'}
			      ,{fixed:'right', width: 178, toolbar:'#barDemo'}
			    ]]
			  });

		  //监听工具条
		  //tool是工具条事件名，tableFilter是table容器属性lay-filter="tableFilter"对应的值
		  table.on('tool(tableFilter)', function(obj){
		    var data = obj.data;//获得当前行数据,json格式对象
		    var layEvent = obj.event;//获得lay-event对应的值
		    if(layEvent === 'detail'){
		      layer.msg('ID：'+ data.id + ' 的查看操作');
		    } else if(layEvent === 'cancel'){
		      layer.confirm('真的取消订单吗?', function(index){
		    	$.ajax({
		    		url:"/output/cancelById",
		    		data:{"outputId":data.id},
		    		dataType:"json",
		    		success:function(jsonResult) {
		    			if(jsonResult.ok){
		    				mylayer.okMsg(jsonResult.msg);
		    				table.reload("layUITableId");
		    			} else {
		    				mylayer.errorMsg(jsonResult.msg);
		    			}
			        layer.close(index);
		    		}
		    	});
		      });
		    }else if(layEvent === 'edit'){
				layer.confirm('是否确认出库', function(index){
					$.ajax({
						url:"/output/outputRepository",
						data:{"outputId":data.id},
						dataType:"json",
						success:function(jsonResult) {
							if(jsonResult.ok){
								mylayer.okMsg(jsonResult.msg);
								table.reload("layUITableId");
							} else {
								mylayer.errorMsg(jsonResult.msg);
							}
							layer.close(index);
						}
					});
				});
			}
		  });

		  var active = {
		    cancelAll: function(){ //获取选中数据
		       var checkStatus = table.checkStatus('layUITableId')
		       var data = checkStatus.data;
		       console.log(data);//选中行的数据
				var ids = []; // [34, 5]
				$(data).each(function() {
					// this
					ids.push(this.id);
				});
				ids = ids.join(','); // '34,5'
		       layer.confirm('真的取消订单吗?', function(index){
			    	$.ajax({
			    		url:"/output/cancelAll",
			    		data:{"ids":ids},
			    		dataType:"json",
			    		success:function(jsonResult) {
			    			if(jsonResult.ok){
			    				mylayer.okMsg(jsonResult.msg);
			    				table.reload("layUITableId");
			    			} else {
			    				mylayer.errorMsg(jsonResult.msg);
			    			}
				        layer.close(index);
			    		}
			    	});
			   });
		    },
			//添加
			  insert : function() {
				  layer.open({
					  type : 2,
					  area : ['800px', '500px'],
					  content : '${path}/supplier/getSupplierInsertPage'
				  });
			  }
		  };

		  $('.demoTable .layui-btn').on('click', function(){
			   var type = $(this).data('type');
			   active[type] ? active[type].call(this) : '';
		   });
		});
	</script>
</body>
</html>